<template>
    <inpCom @add="addTodo"></inpCom>
    <listCom :data="newData" @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></listCom>
</template>
<script setup>
import inpCom from "./input.vue"
import listCom from "./list.vue"
import {ref,computed} from "vue"
// 声明数据
let data =ref(JSON.parse(localStorage.getItem('k')))
// let data = ref([
//     {
//         id:1,
//         td:'吃饭',
//         isCompleted:false
//     },
//     {
//         id:2,
//         td:'睡觉',
//         isCompleted:false
//     },
//     {
//         id:3,
//         td:'喝水',
//         isCompleted:true
//     },
// ])
// 添加事件
let addTodo =(input)=>{
    console.log(input)//得到input输入的值
    // 声明一个对象
    let obj = {
        id:Math.random().toString(32).substring(2),
        td:input,
        isCompleted:false
    }
    data.value.push(obj)
    localStorage.setItem('k',JSON.stringify(data.value))
}
// 删除事件
let delTodo = (input)=>{
    console.log(input)
    data.value.splice(input,1)
    localStorage.setItem('k',JSON.stringify(data.value))
}
// 接收筛选
let filterFlag=ref("all")
let handleGetFlag = flag=>{
    console.log(flag)
    filterFlag.value=flag
}
let allCount =ref(0)
let completedCount = ref(0)
let activeCount = ref(0)
// 处理数据
let newData = computed(()=>{
    let all = data.value;
    let completed = data.value.filter(item=>item.isCompleted);
    let active = data.value.filter(item=>!item.isCompleted);
    allCount = all.length
    completedCount = completed.length
    activeCount = active.length
    switch(filterFlag.value){
        case "all":
            return all;
        case "completed":
            return completed;
        case "active":
            return active;
    
        
    }
})

</script>